
<!--
 作者 : 唐梓元
 日期 : 2019-05-11
 版本 : 1.0
 描述 : 登录注册和找回密码的输入框，只有一行，需要多次引入
 使用 : <cmInput ></cmInput>
 参数 :type:'text'代表输入框类型，placeholder='输入密码'，value='1300000000'空置子组件的value值，
       maxlength='11'输入框长度,path=图片路径只能写绝对路径，
 -->
<template>
    <div class="wrapper">
      <div class="leftImg"><img :src="path" alt="" :class=imgWith></div>
      <input
        :type=type
        :placeholder=placeholder
        :value="value"
        :maxlength="maxlength"
        :readonly="isReadonly"
        @input="$emit('input', $event.target.value)"
        @keyup.enter="goEnter"
      />
    </div>
</template>

<script>
    export default {
        name: "cmInput_login",
      props:{
        placeholder:String,
        path:String,
        imgWith:String,
        maxlength:String,
        value:String,
        isReadonly:{
          type:Boolean,
          default:false
        },
        type:{
          type:String,
          default:"text"
        }
      },
      data(){
          return{

          }
      },
      methods:{
          goEnter(){
            this.$emit("do_login")
          }
      }

    }
</script>

<style scoped>
.wrapper{
  width: 100%;
  height: 3.12rem;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  border: 1px solid #e2e2e7;
  background-color: white;
}
  .wrapper .leftImg{
    height: 3.12rem;
    width: 4.37rem;
    border-right: 1px solid #e2e2e7;
    background-color: white;
  }
.wrapper input{
  margin-left: 5px;
  border: none;
  outline: none;
  flex: 1;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
  .wrapper img{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    margin-left: 20px;
  }
.wrapper .imgWith{
    width: 22px;
  margin-left: 24px;
  }
</style>
